<template>
  <el-button type="primary" @click="init">刷新</el-button>
  <div v-loading="loading" style="margin-top: 10px; height: 30vh; background-color: rgba(0, 0, 0, 0.3)"></div>
  <slot :html="html" />
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";

import { ElButton, ElMessage } from "element-plus";

import { getAllTranslationHeadApi } from "../../../../../api/modules/sysManage/translation";

const html = ref(`
<template>
  <el-button type="primary" @click="init">刷新</el-button>
  <div v-loading="loading" style="margin-top: 10px; height: 30vh; background-color: rgba(0, 0, 0, 0.3)"></div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";

import { ElButton, ElMessage } from "element-plus";

import { getAllTranslationHeadApi } from "../../../../../api/modules/sysManage/translation";

const loading = ref(false);

// 获取页面数据
const queryData = async () => {
  // 真实接口案例
  const res = await getAllTranslationHeadApi({} as FormData);
  return res.data;
};
// 获取下拉选项
const queryOptions = () => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({});
    }, 3000);
  });
};
// 获取筛选数据
const queryFilters = () => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({});
    }, 500);
  });
};
// 初始化页面
const init = async () => {
  // 计时 start
  let t = 0;
  let timer: number = 0;
  const count = () => {
    t += 17;
    timer = requestAnimationFrame(count);
  };
  count();
  // 计时 end

  loading.value = true;
  await Promise.all([queryData(), queryOptions(), queryFilters()]).then(([data, options, filters]) => {
    // 获取三个接口返回数据
    // 消耗时间取接口返回最晚
    console.log(data);
  });
  loading.value = false;

  // 清除计时
  !!timer && cancelAnimationFrame(timer);
  ElMessage.success(\`多接口耗时\$\{t\}毫秒\`);
};

onMounted(() => init());
<\/script>
`);

const loading = ref(false);

// 获取页面数据
const queryData = async () => {
  // 真实接口案例
  const res = await getAllTranslationHeadApi({} as FormData);
  return res.data;
};
// 获取下拉选项
const queryOptions = () => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({});
    }, 3000);
  });
};
// 获取筛选数据
const queryFilters = () => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({});
    }, 500);
  });
};
// 初始化页面
const init = async () => {
  // 计时 start
  let t = 0;
  let timer: number = 0;
  const count = () => {
    t += 17;
    timer = requestAnimationFrame(count);
  };
  count();
  // 计时 end

  loading.value = true;
  await Promise.all([queryData(), queryOptions(), queryFilters()]).then(([data, options, filters]) => {
    // 获取三个接口返回数据
    // 消耗时间取接口返回最晚
    console.log(data, options, filters);
  });
  loading.value = false;

  // 清除计时
  !!timer && cancelAnimationFrame(timer);
  ElMessage.success(`多接口耗时${t}毫秒`);
};

onMounted(() => init());
</script>
